/*3.09 列表
  name:       hui-list
  example:
    <ul class="hui-list hui-list-disc">
      <li class="hui-list-item">无序列表</li>
      <li class="hui-list-item">无序列表</li>
      <li class="hui-list-item">无序列表</li>
    </ul>
    <ol class="hui-list hui-list-decimal">
      <li class="hui-list-item">有序列表</li>
      <li class="hui-list-item">有序列表</li>
      <li class="hui-list-item">有序列表</li>
    </ol>
    <ol class="hui-list hui-list-top">
      <li class="hui-list-item"><span class="num">1</span>有序列表</li>
      <li class="hui-list-item"><span class="num">2</span>有序列表</li>
      <li class="hui-list-item"><span class="num">3</span>有序列表</li>
    </ol>
*/

.hui-list {
  .hui-list-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
    font-size: 14px;
    /*禁止换行*/
    .date {
      font-size: 12px;
      font-family: Arial;
      color: #999;
    }
  }
  &.hui-list-disc {
    list-style: inside;
    list-style-type: disc;
  }
  &.hui-list-decimal {
    list-style: inside;
    list-style-type: decimal;
  }

  /*排行榜*/
  &.hui-list-top {
    .hui-list-item {
      padding-left: 30px;
      text-overflow: ellipsis;
      vertical-align: bottom;
      white-space: nowrap;
      height: 20px;
      list-style: 20px;
      .num {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        background-color: #5a98de;
        text-align: center;
      }
    }
  }
}

/*横向手机 竖向平板*/
@media (max-width: 767px) {
  .hui-list {
    .hui-list-item {
      font-size: 18px;
      padding: 11px 15px;
      border-bottom: 1px solid #eee;
      > a {
        display: block;
        margin: -11px -15px
      }
      .date {
        display: none
      }
      .hui-iconfont {
        background-size: 9px auto;
        margin-top: -7px;
        position: absolute;
        right: 15px;
        top: 50%;
      }
    }
  }
  .night .hui-list {
    >.hui-list-item {
      border-bottom: 1px solid #1F1F1F;
    }
  }
}
